<template>
  <div class="Blog">
        <!-- Begin Main Header Area -->
        <header class="main-header_area position-relative">
            <div class="header-top border-bottom d-none d-md-block">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-6">
                            <div class="header-top-left">
                                <ul class="dropdown-wrap text-matterhorn">
                                    <li class="dropdown">
                                        <button class="btn btn-link dropdown-toggle ht-btn" type="button" id="languageButton" data-bs-toggle="dropdown" aria-expanded="false">
                                            中文
                                            <img src="../assets/images/dropdown_green.png" alt="Header Logo">
                                        </button>
                                        
                                        <ul class="dropdown-menu" aria-labelledby="languageButton">
                                            <li><a class="dropdown-item" href="#">中文</a></li>
                                            <li><a class="dropdown-item" href="#">英语</a></li>
                                        </ul>
                                    </li>
                                    <li class="dropdown">
                                        <button class="btn btn-link dropdown-toggle ht-btn" type="button" id="currencyButton" data-bs-toggle="dropdown" aria-expanded="false">
                                            支付方式
                                            <img  src="../assets/images/dropdown_green.png" alt="Header Logo">
                                        </button>
                                        <ul class="dropdown-menu" aria-labelledby="currencyButton">
                                            <li><a class="dropdown-item" href="#">微信</a></li>
                                            <li><a class="dropdown-item" href="#">支付宝</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        联系方式
                                        <a href="tel://18888888888">18888888888</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="header-top-right text-matterhorn">
                                <p class="shipping mb-0">满99元免运费<span></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-middle py-5">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-12">
                            <div class="header-middle-wrap">
                                <a href="index.html" class="header-logo">
                                    <img class="logo_scale" src="../assets/images/fresh_ecommerce_platform.png" alt="Header Logo">
                                </a>
                                <div class="header-search-area d-none d-lg-block">
                                    <form action="#" class="header-searchbox">
                                        <select class="nice-select select-search-category wide">
                                            <option value="all">所有类型</option>
                                            <option value="product-item">新鲜水果</option>
                                            <option value="product-item-2">新鲜肉类</option>
                                            <option value="product-item-3">新鲜蔬菜</option>
                                            <option value="product-item-4">饮品</option>
                                            <option value="product-item-5">海鲜</option>
                                        </select>
                                        <input class="input-field" type="text" placeholder="搜索">
                                        <button class="btn btn-outline-whisper btn-primary-hover" type="submit"><i class="pe-7s-search"></i>
                                        <img src="../assets/images/scrounge.png" alt="Header Logo"></button>
                                    </form>
                                </div>
                                <div class="header-right">
                                    <ul>
                                        <li class="dropdown d-none d-md-block">
                                            <button class="btn btn-link dropdown-toggle ht-btn p-0" type="button" id="settingButton" data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="pe-7s-users"></i>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="settingButton">
                                                <li><a class="dropdown-item" href="my-account.html">我的账户</a></li>
                                                <li><a class="dropdown-item" href="login-register.html">登录 | 注册</a></li>
                                            </ul>
                                        </li>
                                        <li class="d-none d-md-block">
                                            <a href="wishlist.html">
                                                <i class="pe-7s-like"></i>
                                            </a>
                                        </li>
                                        <li class="d-block d-lg-none">
                                            <a href="#searchBar" class="search-btn toolbar-btn">
                                                <i class="pe-7s-search"></i>
                                            </a>
                                        </li>
                                        
                                        <li class="mobile-menu_wrap d-block d-lg-none">
                                            <a href="#mobileMenu" class="mobile-menu_btn toolbar-btn pl-0">
                                                <i class="pe-7s-menu"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-header header-sticky" data-bg-color="#bac34e">
                <div class="container">
                    <div class="main-header_nav position-relative">
                        <div class="row align-items-center">
                            <div class="col-lg-12 d-none d-lg-block">
                                <div class="main-menu">
                                    <nav class="main-nav">
                                        <ul>
                                            <li class="drop-holder">
                                                <a href="index.html">主页
                                                    <i class="fa fa-chevron-down"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="about.html">关于</a>
                                            </li>
                                            <li class="megamenu-holder">
                                                <a href="javascript:void(0)">商品
                                                    <i class="fa fa-chevron-down"></i>
                                                    <img src="../assets/images/dropdown.png" alt="Header Logo">
                                                </a>
                                                <ul class="drop-menu megamenu">
                                                    <li>
                                                        <span class="title">商品布局</span>
                                                        <ul>
                                                            <li>
                                                                <a href="shop.html">商品</a>
                                                            </li>
                                                            <li>
                                                                <a href="shop-left-sidebar.html">牛油果</a>
                                                            </li>
                                                            <li>
                                                                <a href="shop-right-sidebar.html">苹果</a>
                                                            </li>
                                                            <li>
                                                                <a href="shop-list-fullwidth.html">葡萄</a>
                                                            </li>
                                                            <li>
                                                                <a href="shop-list-left-sidebar.html">梨子</a>
                                                            </li>
                                                            <li>
                                                                <a href="shop-list-right-sidebar.html">饮品</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <span class="title">商品类型</span>
                                                        <ul>
                                                            <li>
                                                                <a href="single-product.html">新鲜水果</a>
                                                            </li>
                                                            <li>
                                                                <a href="single-product-group.html">新鲜肉类</a>
                                                            </li>
                                                            <li>
                                                                <a href="single-product-variable.html">新鲜蔬菜</a>
                                                            </li>
                                                            <li>
                                                                <a href="single-product-sale.html">冷饮速食</a>
                                                            </li>
                                                            <li>
                                                                <a href="single-product-sticky.html">海鲜速递</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <span class="title">产品相关</span>
                                                        <ul>
                                                            <li>
                                                                <a href="my-account.html">个人中心</a>
                                                            </li>
                                                            <li>
                                                                <a href="login-register.html">登录 | 注册</a>
                                                            </li>
                                                            <li>
                                                                <a href="cart.html">购物车</a>
                                                            </li>
                                                            <li>
                                                                <a href="wishlist.html">心愿单</a>
                                                            </li>
                                                            <li>
                                                                <a href="compare.html">产品对比</a>
                                                            </li>
                                                            <li>
                                                                <a href="checkout.html">结算</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="menu-slider-wrap">
                                                        <div class="swiper-container menu-slider">
                                                            <div class="swiper-wrapper">
                                                                <div class="swiper-slide img-zoom-effect with-overlay">
                                                                    <a href="#" class="single-item">
                                                                        <img class="img-full" src="../assets/images/vegetables.png" alt="Megamenu Slider">
                                                                    </a>
                                                                </div>
                                                                <div class="swiper-slide img-zoom-effect with-overlay">
                                                                    <a href="#" class="single-item">
                                                                        <img class="img-full" src="../assets/images/greenage.png" alt="Megamenu Slider">
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="drop-holder">
                                                <a href="javascript:void(0)">页面
                                                    <i class="fa fa-chevron-down"></i>
                                                    <img src="../assets/images/dropdown.png" alt="Header Logo">
                                                </a>
                                                <ul class="drop-menu">
                                                    <li>
                                                        <a href="faq.html">FQA</a>
                                                    </li>
                                                    <li>
                                                        <a href="404.html">404出错</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="drop-holder">
                                                <a href="javascript:void(0)">博客
                                                    <i class="fa fa-chevron-down"></i>
                                                    <img src="../assets/images/dropdown.png" alt="Header Logo">
                                                </a>
                                                <ul class="drop-menu">
                                                    <li class="sub-dropdown-holder">
                                                        <a href="javascript:void(0)">博客</a>
                                                        <ul class="drop-menu sub-dropdown">
                                                            <li>
                                                                <a href="blog.html">博客</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-left-sidebar.html">牛油果传奇</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-right-sidebar.html">苹果</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-list-left-sidebar.html">葡萄的前世今生</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-list-right-sidebar.html">水果的营养功效</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-dropdown-holder">
                                                        <a href="javascript:void(0)">博客详情</a>
                                                        <ul class="drop-menu sub-dropdown">
                                                            <li>
                                                                <a href="blog-detail.html">标签</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-detail-left-sidebar.html">评论博客</a>
                                                            </li>
                                                            <li>
                                                                <a href="blog-detail-right-sidebar.html">我来投稿</a>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <a href="contact.html">联系我们</a>
                                            </li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="offcanvas-search_wrapper" id="searchBar">
                <div class="offcanvas-body">
                    <div class="container h-100">
                        <div class="offcanvas-search">
                            <div class="offcanvas-top">
                                <a href="#" class="button-close"><i class="pe-7s-close"></i></a>
                            </div>
                            <span class="searchbox-info">输入内容并回车搜索</span>
                            <form action="#" class="hm-searchbox">
                                <input type="text" placeholder="Search">
                                <button class="search-btn" type="submit"><i class="pe-7s-search"></i></button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="offcanvas-minicart_wrapper" id="miniCart">
                <div class="offcanvas-body">
                    <div class="minicart-content">
                        <div class="minicart-heading">
                            <h4 class="mb-0">购物车</h4>
                            <a href="#" class="button-close"><i class="pe-7s-close"></i></a>
                        </div>
                        <ul class="minicart-list">
                            <li class="minicart-product">
                                <a class="product-item_remove" href="#"><i
                                    class="pe-7s-close"></i></a>
                                <a href="shop.html" class="product-item_img">
                                    <img class="img-full" src="assets/images/Blog/product/small-size/1-1-112x124.jpg" alt="Product Image">
                                </a>
                                <div class="product-item_content">
                                    <a class="product-item_title" href="shop.html">黑麦</a>
                                    <span class="product-item_quantity">1 x ¥80.00</span>
                                </div>
                            </li>
                            <li class="minicart-product">
                                <a class="product-item_remove" href="#"><i
                                    class="pe-7s-close"></i></a>
                                <a href="shop.html" class="product-item_img">
                                    
                                    <img class="img-full" src="assets/images/Blog/product/small-size/1-2-112x124.jpg" alt="Product Image">
                                </a>
                                <div class="product-item_content">
                                    <a class="product-item_title" href="shop.html">大豆</a>
                                    <span class="product-item_quantity">1 x ¥80.00</span>
                                </div>
                            </li>
                            <li class="minicart-product">
                                <a class="product-item_remove" href="#">
                                    <i class="pe-7s-close"></i>
                                </a>
                                <a href="shop.html" class="product-item_img">
                                    <img class="img-full" src="assets/images/Blog/product/small-size/1-3-112x124.jpg" alt="Product Image">
                                </a>
                                <div class="product-item_content">
                                    <a class="product-item_title" href="shop.html">柠檬</a>
                                    <span class="product-item_quantity">1 x ¥80.00</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="minicart-item_total">
                        <span>小计</span>
                        <span class="ammount">¥240.00</span>
                    </div>
                    <div class="group-btn_wrap d-grid gap-2">
                        <a href="cart.html" class="btn btn-secondary btn-primary-hover">查看购物车</a>
                        <a href="checkout.html" class="btn btn-secondary btn-primary-hover">结算</a>
                    </div>
                </div>
            </div>
            <div class="global-overlay"></div>
        </header>
        <!-- Main Header Area End Here -->
        <!-- Begin Main Content Area -->
        <div class="main-content">
            <div class="breadcrumb-area breadcrumb-height" data-bg-image="assets/images/apple.pngs">
                <div class="container h-100">
                    <div class="row h-100">
                        <div class="col-lg-12">
                            <div class="breadcrumb-item">
                                <img src="../assets/images/1-1-1920x373.jpg" alt="Header Logo">
                                <h2 class="breadcrumb-heading">博客详情</h2><br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blog-area section-space-y-axis-100">
            <!-- <div class="blog-area section-space-y-axis-100" v-for="item in tableData" :key="item.blogId"> -->
                <div class="container">
                    <div class="row" >
                        <div class="col-lg-12">
                            <div class="blog-detail-item" >
                                <div class="blog-img" >
                                    <li class="img-full" ><img :src="serverApiUrl + tableData.demoPicture" alt="Blog Image"></li>
                                    <!-- <img class="img-full" src="serverApiUrl+{{item.demoPicture}}" alt="Blog Image"> -->
                                    <!-- <img class="img-full" src="../assets/images/model/blog/large-size/1-1-1170x672.jpg" alt="Blog Image"> -->
                                </div>
                                <div class="blog-content text-start pb-0">
                                    <div class="blog-meta text-dim-gray pb-3" >
                                        <ul>
                                            <li class="date" style="font-family: SimSun, serif; font-size:20px; text-indent: 2ch;"><i class="fa fa-calendar-o me-2" ></i>发布时间：{{tableData.issueTime}}</li>
                                            <li>
                                                <!-- <span class="comments me-3">
                                                <a href="javascript:void(0)">两条评论</a>
                                            </span> -->
                                                <span class="link-share" style="font-family: SimSun, serif; font-size:20px;">
                                                <a href="javascript:void(0)">分享</a>
                                            </span>
                                            </li>
                                        </ul>
                                    </div>
                                    <h5 class="title mb-4" style="text-align:center; font-family: KaiTi, serif; font-size:50px;">
                                        <strong >{{tableData.title}}</strong>
                                    </h5>
                                    <p class="short-desc mb-4 mb-7" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content1}}</p>
                                    <blockquote class="pt-6 pb-5 mb-5" >
                                        <div class="inner-content">
                                            <p class="mb-0">{{tableData.content2}}<br> 王五
                                                <span class="user-name ms-5 mb-0">某位匿名客户</span>
                                            </p>
                                        </div>
                                    </blockquote>
                                    <p class="short-desc mb-4 mb-9" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content3}}</p>
                                    <div class="blog-banner pb-10">
                                        <div class="single-content pt-4 pt-md-0" >
                                            <p class="short-desc mb-4 mb-5" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content1}}</p>
                                            <p class="short-desc mb-4 mb-5" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content2}}</p>
                                            <p class="short-desc mb-4 mb-0" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content3}}</p>
                                        </div>
                                        <div class="single-img">
                                            <img class="img-full" src="../assets/images/model/blog/banner/1-1-370x400.jpg" alt="Blog Banner">
                                        </div>
                                    </div>
                                    <p class="short-desc mb-4 mb-10" style="font-family: SimSun, serif; font-size:25px;text-indent: 4ch;">{{tableData.content1}}</p>
                                    <div class="tag-wtih-social">
                                        <div class="tag">
                                            <span class="title text-primary" style="font-family: SimSun, serif; font-size:25px;">标签：</span>
                                            <ul>
                                                <li>
                                                    <a href="javascript:void(0)" style="font-family: SimSun, serif; font-size:20px;text-indent: 4ch;">{{tableData.tag}}</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="social-link">
                                            <ul>
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <i class="fa fa-facebook"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <i class="fa fa-pinterest-p"></i>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:void(0)">
                                                        <i class="fa fa-dribbble"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>

import { serverApiUrl } from '@/api/serverApiUrl'

import { getBlogById } from '../api/Blog.js'

/*导入图片*/


export default {
  name: "Blog",
  data() {
    return {
      serverApiUrl: serverApiUrl,

      tableData:[],
      length: "1",
      name: "",
    }
  },
  methods: {
    getParams() {
            this.blogId = this.$route.query.blogId;
        },
    


    },
    
 
  created() {
    this.getParams();
    getBlogById({
        blogId:this.blogId
    }).then(resp=>{
        this.tableData=resp;
        console.log(resp)
    })
//     getBlog().then(resp=>{
//     this.tableData = resp;
//     console.log(resp)
//    })
  }
}
</script>

<style scoped>
  @import '../assets/css/model.css';
  @import '../assets/css/float.css';
  /* @import '../assets/css/font-awesome.min.css';
  @import '../assets/css/Pe-icon-7-stroke.css';
  @import '../assets/css/animate.css';
  @import '../assets/css/jquery-ui.min.css';
  @import '../assets/css/swiper-bundle.min.css';
  @import '../assets/css/nice-select.css';
  @import '../assets/css/magnific-popup.min.css';
  @import '../assets/css/vendor.min.css';
  @import '../assets/css/plugins.min.css';*/
  /* @import '../assets/css/style.min.css';  */

</style>
